网页特色
BY MYSELF
这个网页实现了css关键帧动画，上面和下面的两个span方块都添加了浮动和摇摆的动画
代码实现
——BY MYSELF
.box span{
display: block;
/* 当你将一个元素的 display 属性设置为 block 时，这个元素会被渲染为块级元素，它会独占一行，并且可以设置宽度、高度、内外边距等属性。块级元素会在页面上以块的形式显示，通常会从新行开始，占据整个可用的宽度。
常见的块级元素包括 <.div>、<.p>、<.h1> 等。这些元素默认情况下就是块级元素，但是你也可以通过设置 display: block; 来将其他元素（比如 <.span>）显示为块级元素。 */
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
/* 这些属性将<.span>元素的上、左、右、下定位值都设置为0，这意味着它会完全覆盖其定位上下文的区域。 */
z-index:5;
pointer-events:none;
/* 这个属性设置为none会使<.span>元素不响应鼠标事件，鼠标事件会穿透到下面的元素上。 */
}
/* 这些样式的组合通常用于创建覆盖整个父元素的遮罩层或者浮动提示框等效果。 */
/* <.span> 是HTML中的内联元素，它通常用于对文本的一部分进行特殊的样式或处理。<.span> 元素本身不会在页面上创建新的行或者段落，它只是将其中的文本或其他内联元素包裹起来，以便对其应用样式或其他操作。 */
.box span::before{
content:"";
position:absolute;
background:rgba(255, 255, 255, 0.1);
top:0;
left:0;
width:0;
height:0;
opacity:0;
transition:0.3s;
backdrop-filter: blur(10px);
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
animation: animate 2s ease-in-out infinite;
}
.box:hover span::before{
opacity:1;
top:-50px;
left:50px;
width:100px;
height:100px;
}
.box span::after{
content:"";
position:absolute;
bottom:0;
right:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.1);
opacity:0;
transition:0.5s;
backdrop-filter:blur(10px);
border-radius: 8px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
animation:animate 2s ease-in-out infinite;
animation-delay:-1s;
}
.box:hover span::after{
bottom:-50px;
right:50px;
width:100px;
height:100px;
opacity:1;
}
@keyframes animate {
0%,
100%{
transform: translateY(10px) rotateY(-30deg);
}
50%{
transform: translate(-10px) rotateY(30deg);
}
}
@keyframes rotate{
0% {
transform: rotatey(30deg);
transform-origin: top left;
}
40% {
transform: rotatey(80deg);
transform-origin: top left;
}
80% {
transform: rotatex(180deg);
transform-origin: top left;
}
100% {
transform: rotatex(360deg);
transform-origin: top left;
}
}